import React, { useState ,useRef} from 'react'
import { Breadcrumb, Select, Input, Steps, Button } from 'antd'
import '../assets/styles/Ysteptwo.less'
import { instance } from '../../../api/request'
const { Step } = Steps;
import { history } from 'umi'
import E from 'wangeditor'
export default function seckillAdd(props: any) {

    const [steps, setSteps] = useState(1)
    // const [editor,setEditor]=useState<any>()
    var formdata: any = new FormData();
    // let editor: any = {};
    let editor:any=useRef()
    const [arr, setarr] = useState<any>([])
    function stepsChange(e: any) {
        console.log(e);

    }

    React.useEffect(() => {
        
      
        // containerRef.current.style = 'background-color: green;'
        editor.current=new E('#div1')
      
        editor.current.config.customUploadImg = function (resultFiles: any, insertImgFn: any) {
            // resultFiles 是 input 中选中的文件列表
            // insertImgFn 是获取图片 url 后，插入到编辑器的方法
            // 上传图片，返回结果，将图片插入到编辑器中
            insertImgFn(URL.createObjectURL(resultFiles[0]))
            setarr((arr:any)=>{return [...arr,resultFiles[0]]})
        }
      
        editor.current.create()
        return () => {
            // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
            editor.current.destroy();
        };
    },[])


    async function confirm() {
        
        for (const iterator of formdata.keys()) {
            formdata.delete(iterator)
        }
        const objs: any = history.location.query
        let obj:any={...objs}
        
        
       console.log(obj.id,35535);
       
        arr.forEach((e:any) => {
            formdata.append('file',e)
        });
        
       
        formdata.append('sid',objs.id)
        
        formdata.append('title',editor.current.txt.text())
        const res:any = await instance.post('/seckillShopdetail', formdata)
        if(res.code==200){
            history.push({
                pathname: '/seckill',
            })
        }

    }


    return (


        <div className="YseckillAdd">
            <div className="top">
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/seckill">秒杀管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/seckillShop" className="skeill">添加商品</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div>
                <Steps current={steps} onChange={(e) => stepsChange(e)}>
                    <Step title="选择秒杀商品"></Step>
                    <Step title="填写基础信息" />
                    <Step title="修改商品详情" />
                </Steps>
            </div>
            <div id="div1" className="richText">
            </div>
            <div className="confirm">
                <Button type="primary" onClick={confirm} >提交</Button>
            </div>

        </div>
    )
}
